﻿@page "/GridVirtualScrolling"
@inject ProductService ProductService
@inject IProductCategoriesProvider CategoriesProvider

<div class="demo-description mw-1100" id="VirtualScrolling">
    <h2><DemoNavLink Link="GridPagingAndScrolling#VirtualScrolling" />Data Grid - Virtual Scrolling</h2>

    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#virtual-scrolling">Data Grid</a> supports virtual scrolling that allows end-users to navigate through grid rows using the vertical scrollbar much faster.
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.DataNavigationMode">DataNavigationMode</a> property to activate virtual scrolling.
    </p>
    <p>
        This property accepts the following values:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridNavigationMode">Paging</a> - Users navigate through the data rows with the help of a pager.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridNavigationMode">ShowAllDataRows</a> – All grid rows are displayed on one page. In this mode, the grid does not display the pager.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridNavigationMode">VirtualScrolling</a> - Enables virtual scrolling.
                Users navigate through data rows using the vertical scrollbar.
                When a user scrolls, the Data Grid fetches and renders data rows that become visible.
                In this mode, the Data Grid uses popup windows for data edit and insertion.
        </li>
    </ul>
    <p>
        In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.DataNavigationMode">DataNavigationMode</a> property is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridNavigationMode">DataGridNavigationMode.VirtualScrolling</a>.
    </p>
</div>

@if (DataSource == null || NestedDataSource == null) {
    <p><em>Loading...</em></p>
} else {
    <DxDataGrid Data="@DataSource"
                DataNavigationMode="DataGridNavigationMode.VirtualScrolling"
                RowRemoving="@((dataItem) => OnRowRemoving(dataItem))"
                RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
                RowInserting="@((newValues) => OnRowInserting(newValues))"
                CssClass="mw-1100">

        <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn>

        <DxDataGridColumn Field="@nameof(Product.Id)" Caption="ID" Width="50px">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.ProductName)" Caption="Product Name">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability" Width="85px">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as Product).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if(inStock) {
                        <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        } else {
                        <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
            <EditTemplate>
                <DxComboBox Data="@(new List<string>() { "In stock", "Sold out" })"
                            Value="@(((bool)((CellEditContext)context).CellValue) ? "In stock" : "Sold out" )"
                            ValueChanged="@((string newCellValue) => ((CellEditContext)context).OnChanged(newCellValue == "In stock"))">
                </DxComboBox>
            </EditTemplate>
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.ProductCategoryId)" Caption="Category">
            <DisplayTemplate>
                @{
                    var item = NestedDataSource.Where(x => x.SubcategoryID == (int)((context as Product).ProductCategoryId)).FirstOrDefault();
                    string category = item != null ? item.Category.ToString() : "none";
                    string subcategory = item != null ? item.Subcategory : "none";
                    <span>@category/@subcategory</span>
                }
            </DisplayTemplate>
            <EditTemplate>
                <DxComboBox Data="@NestedDataSource"
                            TextFieldName="CategorySubcategory"
                            Value="@(NestedDataSource.Where(x => x.SubcategoryID == (int)((CellEditContext)context).CellValue).FirstOrDefault())"
                            ValueChanged="@((ProductCategory newCellValue) => ((CellEditContext)context).OnChanged(newCellValue.SubcategoryID))">
                </DxComboBox>
            </EditTemplate>
        </DxDataGridColumn>

    </DxDataGrid>

    <CodeSnippet_GridVirtualScrolling></CodeSnippet_GridVirtualScrolling>
}

@code {
    IEnumerable<Product> DataSource;
    IEnumerable<ProductCategory> NestedDataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await ProductService.LoadAsync();
        NestedDataSource = await CategoriesProvider.GetProductCategoriesAsync();
    }

    void OnRowRemoving(Product dataItem)
    {
        ProductService.RemoveAsync(dataItem);
    }
    void OnRowUpdating(Product dataItem, Dictionary<string, object> newValue)
    {
        ProductService.UpdateAsync(dataItem, newValue);
    }
    void OnRowInserting(Dictionary<string, object> newValue)
    {
        ProductService.InsertAsync(newValue);
    }
}
